<template>
  <div class="transaction-chain-container">
    <el-card class="transaction-card">
      <div slot="header" class="clearfix">
        <span class="header-title"><i class="el-icon-connection"></i> 区块链交易链路流程</span>
      </div>
      
      <!-- 区块链链路概览 -->
      <div class="overview-section">
        <el-alert
          title="区块链交易链路全景视图"
          type="success"
          description="从商品上链到交易完成的全流程展示"
          show-icon
          :closable="false">
        </el-alert>
        
        <div class="chain-summary">
          <div class="chain-item" v-for="(item, index) in chainSteps" :key="index">
            <div class="step-number">{{ index + 1 }}</div>
            <div class="step-info">
              <h4>{{ item.title }}</h4>
              <p>{{ item.description }}</p>
            </div>
            <el-divider direction="vertical" v-if="index < chainSteps.length - 1"></el-divider>
          </div>
        </div>
      </div>
      
      <!-- 链路选择器 -->
      <div class="chain-selector">
        <el-radio-group v-model="selectedChainType" @change="switchChain">
          <el-radio-button label="standard">基础交易链路</el-radio-button>
          <el-radio-button label="blockchain">区块链增强链路</el-radio-button>
        </el-radio-group>
      </div>
      
      <!-- 交易链路时间轴 -->
      <div class="transaction-timeline">
        <h3 class="section-title">
          <i class="el-icon-time"></i> 
          {{ selectedChainType === 'standard' ? '基础交易链路' : '区块链增强交易链路' }}
        </h3>
        
        <el-timeline>
          <!-- 商品上链 -->
          <el-timeline-item 
            type="primary" 
            size="large"
            >
            <el-card class="timeline-card">
              <h4>{{ currentChain[0].title }}</h4>
              <p v-for="(detail, idx) in currentChain[0].details" :key="idx">{{ detail }}</p>
              <div class="tech-stack">
                <span class="tech-tag">{{ currentChain[0].tech }}</span>
              </div>
            </el-card>
          </el-timeline-item>
          
          <!-- 账户验证 -->
          <el-timeline-item 
            type="warning"
            >
            <el-card class="timeline-card">
              <h4>{{ currentChain[1].title }}</h4>
              <p v-for="(detail, idx) in currentChain[1].details" :key="idx">{{ detail }}</p>
              <div class="tech-stack">
                <span class="tech-tag">{{ currentChain[1].tech }}</span>
              </div>
            </el-card>
          </el-timeline-item>
          
          <!-- 交易确认 -->
          <el-timeline-item 
            type="success"
            >
            <el-card class="timeline-card">
              <h4>{{ currentChain[2].title }}</h4>
              <p v-for="(detail, idx) in currentChain[2].details" :key="idx">{{ detail }}</p>
              <div class="tech-stack">
                <span class="tech-tag">{{ currentChain[2].tech }}</span>
              </div>
            </el-card>
          </el-timeline-item>
          
          <!-- 所有权转移 -->
          <el-timeline-item 
            type="info"
            >
            <el-card class="timeline-card">
              <h4>{{ currentChain[3].title }}</h4>
              <p v-for="(detail, idx) in currentChain[3].details" :key="idx">{{ detail }}</p>
              <div class="tech-stack">
                <span class="tech-tag">{{ currentChain[3].tech }}</span>
              </div>
            </el-card>
          </el-timeline-item>
          
          <!-- 交易记录 -->
          <el-timeline-item 
            type="warning"
            >
            <el-card class="timeline-card">
              <h4>{{ currentChain[4].title }}</h4>
              <p v-for="(detail, idx) in currentChain[4].details" :key="idx">{{ detail }}</p>
              <div class="tech-stack">
                <span class="tech-tag">{{ currentChain[4].tech }}</span>
              </div>
            </el-card>
          </el-timeline-item>
          
          <!-- 交易完成 -->
          <el-timeline-item 
            type="success"
            >
            <el-card class="timeline-card">
              <h4>{{ currentChain[5].title }}</h4>
              <p v-for="(detail, idx) in currentChain[5].details" :key="idx">{{ detail }}</p>
              <div class="tech-stack">
                <span class="tech-tag">{{ currentChain[5].tech }}</span>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
      
      <!-- 交易链路部署架构 -->
      <div class="deployment-section">
        <h3 class="section-title"><i class="el-icon-s-operation"></i> 区块链交易链路部署架构</h3>
        
        <el-tabs v-model="activeDeployTab">
          <el-tab-pane label="后端架构" name="backend">
            <div class="deployment-info">
              <el-descriptions title="后端服务架构" :column="1" border>
                <el-descriptions-item label="技术栈">
                  FISCO BCOS + WeBASE-Front + MySQL + Redis
                </el-descriptions-item>
                <el-descriptions-item label="微服务拆分">
                  <div class="service-list">
                    <div class="service-item" v-for="(service, idx) in backendServices" :key="idx">
                      <div class="service-name">{{ service.name }}</div>
                      <div class="service-desc">{{ service.description }}</div>
                    </div>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="部署方式">
                  Docker容器化部署 + Kubernetes编排
                </el-descriptions-item>
                <el-descriptions-item label="扩展能力">
                  服务水平扩展、故障自动恢复、蓝绿发布
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="前端架构" name="frontend">
            <div class="deployment-info">
              <el-descriptions title="前端架构" :column="1" border>
                <el-descriptions-item label="技术栈">
                  Vue.js + ElementUI + Axios + Vuex
                </el-descriptions-item>
                <el-descriptions-item label="组件设计">
                  <div class="component-list">
                    <el-tag v-for="(comp, idx) in frontendComponents" :key="idx" type="success" effect="plain" class="comp-tag">
                      {{ comp }}
                    </el-tag>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="部署方式">
                  Nginx + CDN加速
                </el-descriptions-item>
                <el-descriptions-item label="性能优化">
                  懒加载、代码分割、图片优化、缓存控制
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="区块链集成" name="blockchain">
            <div class="deployment-info">
              <el-descriptions title="区块链服务集成" :column="1" border>
                <el-descriptions-item label="技术栈">
                  FISCO BCOS + WeBASE-Front + Web3.js
                </el-descriptions-item>
                <el-descriptions-item label="智能合约">
                  <div class="contract-list">
                    <div class="contract-item" v-for="(contract, idx) in blockchainContracts" :key="idx">
                      <div class="contract-name">{{ contract.name }}</div>
                      <div class="contract-desc">{{ contract.description }}</div>
                    </div>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="部署方式">
                  私有链部署，多节点共识
                </el-descriptions-item>
                <el-descriptions-item label="优势">
                  数据不可篡改、全链路追溯、智能合约执行
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      
      <!-- 实施建议 -->
      <div class="implementation-section">
        <h3 class="section-title"><i class="el-icon-s-flag"></i> 实施建议</h3>
        
        <el-collapse v-model="activePhases">
          <el-collapse-item title="第一阶段：基础交易链路搭建" name="1">
            <div class="phase-content">
              <p>1. 设计并实现基础账户、商品、交易数据模型</p>
              <p>2. 开发商品上链、交易创建、所有权转移等核心功能</p>
              <p>3. 建立基本的前端用户界面，展示交易流程</p>
              <p>4. 部署基础微服务架构，确保基本功能稳定运行</p>
              <p>5. 完成用户体验测试，优化交互流程</p>
            </div>
          </el-collapse-item>
          
          <el-collapse-item title="第二阶段：区块链增强功能" name="2">
            <div class="phase-content">
              <p>1. 设计适合交易场景的智能合约模型</p>
              <p>2. 开发商品溯源、交易记录上链、所有权验证等区块链功能</p>
              <p>3. 完善前端区块链交互界面，支持交易链路可视化</p>
              <p>4. 集成区块链钱包功能，支持加密货币支付</p>
              <p>5. 测试区块链交易性能和安全性</p>
            </div>
          </el-collapse-item>
          
          <el-collapse-item title="第三阶段：高级功能与优化" name="3">
            <div class="phase-content">
              <p>1. 实现高可用架构，提升系统承载能力</p>
              <p>2. 引入大数据分析，优化交易推荐和商品管理</p>
              <p>3. 增强系统安全性，完善权限和数据隐私保护</p>
              <p>4. 开发供应商合作接口，实现产业链协同</p>
              <p>5. 扩展国际化支持，满足全球业务需求</p>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'TransactionChain',
  data() {
    return {
      loading: false,
      selectedChainType: 'standard',
      activeDeployTab: 'backend',
      activePhases: ['1'],
      chainSteps: [
        { title: '商品上链', description: '商品信息上链并生成唯一标识' },
        { title: '账户验证', description: '验证交易双方账户的有效性' },
        { title: '交易确认', description: '确认交易信息并准备执行' },
        { title: '所有权转移', description: '完成商品所有权的转移' },
        { title: '交易记录', description: '记录交易信息到区块链' },
        { title: '交易完成', description: '完成交易并更新状态' }
      ],
      standardChain: [
        { 
          title: '商品上链', 
          details: [
            '商品信息录入系统',
            '生成商品唯一标识',
            '记录商品基本信息',
            '设置商品初始状态'
          ],
          tech: '前端：Vue.js + ElementUI'
        },
        { 
          title: '账户验证', 
          details: [
            '验证交易双方账户',
            '检查账户余额和权限',
            '确认交易资格',
            '记录验证结果'
          ],
          tech: '后端：FISCO BCOS SDK'
        },
        { 
          title: '交易确认', 
          details: [
            '确认交易信息完整性',
            '验证交易参数有效性',
            '检查交易限制条件',
            '准备交易执行环境'
          ],
          tech: '后端：WeBASE-Front'
        },
        { 
          title: '所有权转移', 
          details: [
            '执行所有权变更',
            '更新商品状态',
            '记录转移过程',
            '通知相关方'
          ],
          tech: '后端：FISCO BCOS SDK'
        },
        { 
          title: '交易记录', 
          details: [
            '生成交易记录',
            '保存交易详情',
            '更新账户状态',
            '记录操作日志'
          ],
          tech: '后端：WeBASE-Front'
        },
        { 
          title: '交易完成', 
          details: [
            '确认交易完成',
            '更新最终状态',
            '生成交易凭证',
            '通知交易结果'
          ],
          tech: '全栈：Vue.js + FISCO BCOS'
        }
      ],
      blockchainChain: [
        { 
          title: '商品上链', 
          details: [
            '商品信息上链',
            '生成链上唯一标识',
            '记录商品元数据',
            '设置初始所有权'
          ],
          tech: '前端：Vue.js + Web3.js'
        },
        { 
          title: '账户验证', 
          details: [
            '验证链上账户',
            '检查智能合约权限',
            '确认交易资格',
            '记录验证结果'
          ],
          tech: '智能合约：Solidity'
        },
        { 
          title: '交易确认', 
          details: [
            '智能合约验证交易',
            '检查链上状态',
            '确认交易条件',
            '准备链上执行'
          ],
          tech: '区块链：FISCO BCOS'
        },
        { 
          title: '所有权转移', 
          details: [
            '执行链上转移',
            '更新所有权记录',
            '生成转移证明',
            '触发链上事件'
          ],
          tech: '智能合约：Solidity'
        },
        { 
          title: '交易记录', 
          details: [
            '记录链上交易',
            '保存交易哈希',
            '更新链上状态',
            '生成交易证明'
          ],
          tech: '区块链：FISCO BCOS'
        },
        { 
          title: '交易完成', 
          details: [
            '确认链上完成',
            '更新最终状态',
            '生成链上凭证',
            '触发完成事件'
          ],
          tech: '智能合约：事件监听'
        }
      ],
      backendServices: [
        { name: '账户服务', description: '管理用户账户、认证和权限' },
        { name: '商品服务', description: '商品信息管理和上链' },
        { name: '交易服务', description: '交易创建、执行和记录' },
        { name: '区块链服务', description: 'FISCO BCOS交互和智能合约管理' },
        { name: '记录服务', description: '交易记录和历史查询' },
        { name: '通知服务', description: '系统消息和状态推送' },
        { name: 'WeBASE服务', description: '区块链浏览器和管理功能' }
      ],
      frontendComponents: [
        '商品列表组件', '商品详情组件', '交易表单组件', '账户管理组件', 
        '交易记录组件', '区块链浏览器组件', '交易链路可视化组件',
        '智能合约交互组件', '钱包管理组件', '系统通知组件'
      ],
      blockchainContracts: [
        { name: '商品合约', description: '管理商品信息和所有权' },
        { name: '交易合约', description: '处理交易执行和确认' },
        { name: '账户合约', description: '管理账户信息和权限' },
        { name: '记录合约', description: '记录交易历史和数据' },
        { name: '系统合约', description: '管理系统配置和升级' }
      ]
    }
  },
  computed: {
    currentChain() {
      return this.selectedChainType === 'standard' ? this.standardChain : this.blockchainChain;
    }
  },
  methods: {
    switchChain(type) {
      this.selectedChainType = type;
    }
  }
}
</script>

<style scoped>
.transaction-chain-container {
  padding: 20px;
}

.transaction-card {
  width: 100%;
  background-color: var(--medium-bg);
  border: 1px solid rgba(0, 204, 255, 0.2);
  box-shadow: 0 8px 24px rgba(0, 102, 204, 0.15);
  overflow: hidden;
  position: relative;
}

.transaction-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
}

.header-title {
  font-size: 20px;
  font-weight: bold;
  font-family: var(--font-heading);
  color: var(--text-primary);
  display: flex;
  align-items: center;
}

.header-title i {
  color: var(--accent-color);
  margin-right: 10px;
  font-size: 22px;
}

.overview-section {
  margin-bottom: 30px;
}

.chain-summary {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  flex-wrap: wrap;
  border: 1px solid rgba(0, 204, 255, 0.15);
  position: relative;
  overflow: hidden;
}

.chain-summary::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 102, 204, 0.05) 0%, transparent 100%);
  pointer-events: none;
}

.chain-item {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 150px;
  margin: 10px 0;
  position: relative;
  z-index: 1;
}

.step-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 15px;
  box-shadow: 0 4px 8px rgba(0, 204, 255, 0.3);
  font-family: var(--font-heading);
}

.step-info h4 {
  margin: 0;
  font-size: 16px;
  color: var(--text-primary);
  font-family: var(--font-heading);
}

.step-info p {
  margin: 5px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.chain-selector {
  margin: 25px 0;
  text-align: center;
}

.section-title {
  margin: 30px 0 20px;
  font-weight: bold;
  color: var(--accent-color);
  padding-left: 12px;
  border-left: 3px solid var(--accent-color);
  font-family: var(--font-heading);
  font-size: 18px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
}

.section-title i {
  margin-right: 10px;
  font-size: 20px;
}

.transaction-timeline {
  margin-top: 30px;
  position: relative;
}

.transaction-timeline::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 56px;
  bottom: 20px;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent-color), var(--primary-color));
  opacity: 0.4;
  z-index: 0;
}

.timeline-card {
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 204, 255, 0.15);
  border-radius: 6px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.timeline-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 102, 204, 0.05) 0%, transparent 100%);
  pointer-events: none;
}

.timeline-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 204, 255, 0.2);
  border-color: rgba(0, 204, 255, 0.3);
}

.timeline-card h4 {
  margin-top: 0;
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: 16px;
}

.timeline-card p {
  margin: 5px 0;
  color: var(--text-secondary);
  position: relative;
  padding-left: 15px;
}

.timeline-card p::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--accent-color);
}

.tech-stack {
  margin-top: 12px;
  border-top: 1px dashed rgba(0, 204, 255, 0.2);
  padding-top: 12px;
}

.tech-tag {
  display: inline-block;
  padding: 3px 8px;
  font-size: 12px;
  color: var(--accent-color);
  background-color: rgba(0, 204, 255, 0.1);
  border-radius: 4px;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
  border: 1px solid rgba(0, 204, 255, 0.2);
}

.deployment-section {
  margin-top: 40px;
}

.deployment-info {
  margin-top: 20px;
}

.service-list, .contract-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.service-item, .contract-item {
  background-color: rgba(0, 0, 0, 0.2);
  padding: 15px;
  border-radius: 6px;
  width: calc(50% - 15px);
  border: 1px solid rgba(0, 204, 255, 0.15);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.service-item:hover, .contract-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 204, 255, 0.15);
  border-color: rgba(0, 204, 255, 0.3);
}

.service-item::after, .contract-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 102, 204, 0.05) 0%, transparent 100%);
  pointer-events: none;
}

.service-name, .contract-name {
  font-weight: bold;
  color: var(--text-primary);
  font-family: var(--font-heading);
  position: relative;
}

.service-name::before, .contract-name::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 50%;
  width: 6px;
  height: 6px;
  background: var(--accent-color);
  border-radius: 50%;
  transform: translateY(-50%);
}

.service-desc, .contract-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 8px;
}

.component-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.comp-tag {
  margin-bottom: 5px;
  background-color: rgba(0, 204, 255, 0.1) !important;
  border-color: rgba(0, 204, 255, 0.2) !important;
  color: var(--text-primary) !important;
}

.implementation-section {
  margin-top: 40px;
  margin-bottom: 20px;
}

.phase-content {
  padding: 15px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  border: 1px solid rgba(0, 204, 255, 0.15);
}

.phase-content p {
  margin: 8px 0;
  color: var(--text-secondary);
  position: relative;
  padding-left: 20px;
}

.phase-content p::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 9px;
  width: 6px;
  height: 6px;
  background: var(--accent-color);
  border-radius: 50%;
}

/* 自定义Element UI样式 */
:deep(.el-timeline-item__node) {
  background-color: var(--accent-color);
  border-color: rgba(0, 204, 255, 0.3);
}

:deep(.el-timeline-item__tail) {
  border-left-color: rgba(0, 204, 255, 0.2);
}

:deep(.el-radio-button__inner) {
  background-color: var(--medium-bg);
  border-color: var(--light-bg);
  color: var(--text-secondary);
}

:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  background-color: var(--primary-color);
  border-color: var(--accent-color);
  color: white;
  box-shadow: -1px 0 0 0 var(--accent-color);
}

:deep(.el-tabs__item) {
  color: var(--text-secondary);
}

:deep(.el-tabs__item.is-active) {
  color: var(--accent-color);
}

:deep(.el-tabs__active-bar) {
  background-color: var(--accent-color);
}

:deep(.el-collapse-item__header) {
  background-color: var(--medium-bg);
  color: var(--text-primary);
  border-bottom-color: var(--light-bg);
}

:deep(.el-collapse-item__content) {
  background-color: var(--medium-bg);
  color: var(--text-secondary);
}

:deep(.el-descriptions__label) {
  color: var(--text-primary);
}

:deep(.el-descriptions__content) {
  color: var(--text-secondary);
}

:deep(.el-descriptions-item__label) {
  background-color: var(--light-bg) !important;
}

:deep(.el-descriptions-item__content) {
  background-color: var(--medium-bg) !important;
}

@media (max-width: 768px) {
  .chain-item {
    flex-basis: 100%;
  }
  
  .service-item, .contract-item {
    width: 100%;
  }
  
  .transaction-timeline::before {
    left: 16px;
  }
}
</style> 